<template>
  <div class="page-container-padding">
    <!-- 查询条件 -->
    <div>
      <span style="margin: 0 6px">人员</span>
      <el-select v-model="queryUser" size="mini" style="width: 150px">
        <el-option
          v-for="user in userList"
          :value="user.id"
          :label="user.admin_name"
          :key="user.id"
        ></el-option>
      </el-select>
      <span style="margin: 0 6px">日期</span>
      <span>
        <el-date-picker
          style="width: 220px"
          v-model="dateRange"
          type="daterange"
          size="mini"
          :clearable="false"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </span>
      <span style="margin-left: 6px">
        <el-select v-model="queryExamineState" size="mini" style="width: 120px">
          <el-option :value="null" label="全部"></el-option>
          <el-option :value="0" label="等待审核"></el-option>
          <el-option :value="1" label="审核通过"></el-option>
          <el-option :value="-1" label="等待不通过"></el-option>
        </el-select>
      </span>
      <span style="margin-left: 6px">
        <el-button type="primary" size="mini" @click="toQueryWrittenArticle">
          查询
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preMonthWrittenArticle">
          上一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextMonthWrittenArticle">
          下一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="yearWrittenArticle">
          全年
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preYearWrittenArticle">
          上一年
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextYearWrittenArticle">
          下一年
        </el-button>
      </span>
    </div>
    <!-- 显示数据 -->
    <div>
      <div
        style="
          line-height: 22px;
          background-color: #c7efcf;
          margin: 10px 0;
          padding: 0 6px;
        "
      >
        文章评级参考项：根据
        <span style="color: #ff430d">
          标题、逻辑、数据、论证、观点价值、篇幅
        </span>
        分为5个等级，
        <br />
        达到6项的A级、5项的B级、4项的C级、3项的D级、2项的E级。
        <span style="color: #ff430d">(点击附件文字即可查看文章进行评级。)</span>
      </div>
      <div v-if="articleList.length > 0">
        <div>
          <el-table border stripe :data="articleList">
            <el-table-column
              prop="create_date"
              label="日期"
              width="100px"
            ></el-table-column>
            <el-table-column
              prop="admin_name"
              label="姓名"
              width="100px"
            ></el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              width="320px"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="words"
              label="字数"
              width="100px"
              align="right"
            ></el-table-column>
            <el-table-column
              prop="article_type_zh"
              label="文章类型"
              width="110px"
            ></el-table-column>
            <el-table-column label="附件" width="250px" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.annex">
                  <vab-icon
                    :icon="['fas', 'download']"
                    @click="toDownloadAnnex(scope.row)"
                  ></vab-icon>
                  <span class="annex-file" @click="toPreview(scope.row)">
                    {{ scope.row.annex }}
                  </span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="examine_zh"
              label="审核状态"
              width="90px"
            ></el-table-column>
            <el-table-column
              prop="examine_explain"
              label="审核评价"
              width="130px"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="level_flag"
              label="等级"
              width="50px"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="level_explain"
              label="等级评价"
              width="140px"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="is_publish"
              label="外发"
              width="50px"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.is_publish === 1 ? '是' : '否' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-else>
        <el-empty description="查询条件无数据"></el-empty>
      </div>
    </div>

    <!-- 预览弹窗 -->
    <el-dialog
      v-if="showDocxView"
      width="900px"
      top="15px"
      :visible.sync="showDocxView"
    >
      <div slot="title">
        <div style="display: flex; align-items: center; margin-right: 40px">
          <el-input
            v-model.trim="currentObj.level_explain"
            placeholder="根据标题、逻辑、数据、论证、观点价值、篇幅分为5个等级评价"
            size="mini"
          ></el-input>
          <span style="margin-left: 2px">
            <el-select
              v-model="currentObj.level_flag"
              size="mini"
              placeholder="请选择等级"
            >
              <el-option value="A" label="A (达6项)"></el-option>
              <el-option value="B" label="B (达5项)"></el-option>
              <el-option value="C" label="C (达4项)"></el-option>
              <el-option value="D" label="D (达3项)"></el-option>
              <el-option value="E" label="E (达2项)"></el-option>
            </el-select>
          </span>
          <el-button
            style="margin-left: 6px"
            type="primary"
            size="mini"
            @click="toSaveArticleLevel"
          >
            保存
          </el-button>
        </div>
      </div>
      <div style="height: calc(100vh - 128px); overflow-y: auto">
        <div style="margin-left: 40px">
          文章类型：
          <span style="font-weight: 700; color: #185abd">
            {{ currentObj.currentArticleType }}
          </span>
        </div>
        <div
          v-show="noSupportView"
          style="
            font-size: 30px;
            text-align: center;
            margin-top: calc(50vh - 100px);
          "
        >
          不支持预览的文档格式...
        </div>
        <div ref="docFile"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getMonthDatePoint,
    getYearDatePoint,
    datetimeToStr,
  } from '@/utils/datetimeUtils'
  import { getFileBlob, downloadFile } from '@/api/fileHandler'
  import { getAnalystList } from '@/api/user'
  import {
    queryLevelArticle,
    evaluateArticle,
  } from '@/api/departmentWork/articleWriting'
  let docx = require('docx-preview')
  export default {
    data() {
      return {
        dateRange: [],
        userList: [],
        queryUser: 0,
        queryExamineState: 1,
        articleList: [],

        noSupportView: false,
        showDocxView: false,
        currentObj: {
          aid: null,
          level_flag: '',
          level_explain: '', // 当前评级意见
          currentArticleType: '',
        },
      }
    },
    mounted() {
      this.setCurrentDates()
      this.queryAnalysts()
      this.queryWrittenArticle()
    },
    methods: {
      setCurrentDates() {
        let flag = new Date().getDate() < 10 ? 'previous' : 'current'
        this.dateRange = getMonthDatePoint(new Date(), flag)
      },
      queryAnalysts() {
        getAnalystList().then((res) => {
          this.userList = res.data
          this.userList.splice(0, 0, { id: 0, admin_name: '全部' })
        })
      },

      queryWrittenArticle() {
        const paramData = {
          start: datetimeToStr(this.dateRange[0], true, ''),
          end: datetimeToStr(this.dateRange[1], true, ''),
          user: this.queryUser,
          exm: this.queryExamineState,
        }
        queryLevelArticle(paramData).then((res) => {
          this.articleList = res.data.articles
        })
      },

      currentPageChange(page) {
        this.page = page
        this.queryWrittenArticle()
      },

      toPreview(row) {
        // window.location.href = "http://vw.usdoc.cn/?src="+fileStorage+row.annex_url
        this.currentObj.aid = row.id
        this.currentObj.level_explain = row.level_explain
        this.currentObj.level_flag = row.level_flag
        this.currentObj.currentArticleType = row.article_type_zh
        this.showDocxView = true
        if (row.annex_url.slice(-5) === '.docx') {
          this.noSupportView = false
          getFileBlob(row.annex_url).then(({ data }) => {
            this.$docxView.renderAsync(data, this.$refs.docFile)
          })
        } else {
          this.noSupportView = true
        }
      },

      // 下载附件
      toDownloadAnnex(row) {
        downloadFile(row.annex_url)
      },

      // 确定保存评级和意见
      toSaveArticleLevel() {
        const exmData = {
          aid: this.currentObj.aid,
          level_flag: this.currentObj.level_flag,
          level_explain: this.currentObj.level_explain,
        }
        if (!exmData.level_explain) {
          this.$baseMessage('请填写评级意见...', 'error')
          return
        }
        evaluateArticle(exmData).then((res) => {
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
          if (res.code === 200) {
            this.showDocxView = false
            this.queryWrittenArticle()
          }
        })
      },

      //点击查询
      toQueryWrittenArticle() {
        // this.setCurrentDates()
        this.queryWrittenArticle()
      },
      // 点击上一个月
      preMonthWrittenArticle() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
        this.queryWrittenArticle()
      },

      // 点击下一个月
      nextMonthWrittenArticle() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
        this.queryWrittenArticle()
      },

      // 点击全年
      yearWrittenArticle() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'current')
        this.queryWrittenArticle()
      },

      // 点击上一年
      preYearWrittenArticle() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'previous')
        this.queryWrittenArticle()
      },

      // 点击下一年
      nextYearWrittenArticle() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'next')
        this.queryWrittenArticle()
      },
    },
  }
</script>

<style scoped lang="scss">
  .table-edit-icon {
    float: right;
    margin-top: 5px;
    cursor: pointer;
  }
  .annex-file {
    color: #0073fc;
    cursor: pointer;
    margin-left: 4px;
  }
  ::v-deep {
    .docx-wrapper {
      background-color: #fefefe;
    }
  }
</style>
